<template>
  <div class="photo-detail">
    <nav-bar title="图文详情" />
    <base-header-title :title="info.title" :click="info.click" :addTime="info.add_time" />
    <!-- <ul>
              <li v-for="(img,index) in imgs" :key="index">
                  <img :src="img.src" @click="preview(index)" width="120" height="120">
              </li>
        </ul> -->
    <vue-preview :slides="imgs" @close="handleClose"></vue-preview>

    <div class="photo-desc">
      <div v-html="info.content"></div>
    </div>
    <comment :cid="$route.query.id" />
  </div>
</template>
<script>
import Comment from '@/components/common/Comment'

export default {
  components: { Comment },
  data () {
    return {
      imgs: [], // 缩略图
      info: {} // 详细信息
    }
  },
  created () {
    let id = this.$route.query.id
    console.log(id)
    this.$axios
      .get('getimageInfo/' + id)
      .then(res => {
        console.log(res)
        this.info = res.data.message[0]
      })
      .catch(err => console.log('获取图文详情失败', err))

    this.$axios
      .get('getthumimages/' + id)
      .then(res => {
        console.log(res)
        this.imgs = res.data.message
        this.imgs.forEach(img => {
          img.msrc = img.src
          img.w = 600
          img.h = 400
        })
        console.log(this.imgs)
      })
      .catch(err => console.log('获取图片缩略图失败', err))
  },
  methods: {
    preview (index) {
      console.log(this.imgs)
      console.log(this.$preview)
      this.$preview.get(index, this.imgs)
    },
    handleClose () {
      console.log('close event')
    }
  }
}
</script>
<style lang="less">
.photo-detail {
  margin: 0 0 3.4375rem 0;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  li {
    display: inline-block;
    list-style: none;
    margin: 0 0 0 4px;
  }
  .my-gallery {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  figure {
    img {
      width: 120px;
      height: 120px;
      // @media screen and(min-width: 320px) {
      //   margin: 0 0 0 1.5rem;
      // }
      // @media screen and(min-width: 360px) {
      //   margin: 0 0 0 0;
      // }
      // @media screen and(min-width: 375px) {
      //   margin: 0 0 0 .2rem;
      // }
      // @media screen and(min-width: 411px) {
      //   margin: 0 0 0 .8rem;
      // }
      // @media screen and(min-width: 414px) {
      //   margin: 0 0 0 .9rem;
      // }
      // @media screen and(min-width: 768px) {
      //   margin: 0 0 0 1.8rem;
      // }
      // @media screen and(min-width: 1024px) {
      //   margin: 0 0 0 4.5rem;
      // }
      @media screen and(max-width: 1024px) {
        margin: 0 0 0 4.5rem;
      }
      @media screen and(max-width: 768px) {
        margin: 0 0 0 1.8rem;
      }
      @media screen and(max-width: 414px) {
        margin: 0 0 0 0.9rem;
      }
      @media screen and(max-width: 411px) {
        margin: 0 0 0 0.8rem;
      }
      @media screen and(max-width: 375px) {
        margin: 0 0 0 0.2rem;
      }
      @media screen and(max-width: 360px) {
        margin: 0 0 0 0;
      }
      @media screen and(max-width: 320px) {
        margin: 0 0 0 1.5rem;
      }
    }
  }
}
</style>
